<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <ul>
        <!-- key v-for生成的都是虚拟dom  在删除和一些操作中无法正常排序 增加key的唯一标识
            key 用 下标 或数据中的唯一字段（item.id）   
        -->
        <!-- <li v-for="item in list" key="item">{{item}}</li> -->
        <!-- v-bind:属性="动态的属性值" -->
        <li v-for="(item,index) in list" :key="index">{{item}}</li>
      </ul>
      <ul>
        <!-- 默认写法 objItem 是value值 -->
        <!-- <li v-for="objItem in obj">{{objItem}}</li> -->
        <li v-for="(objItem,key,index) in obj" :key="index">
          {{index}} : {{key}} : {{objItem}}
        </li>
      </ul>
      <ul>
        <li v-for="(item,index) in prolist" :key="item.id">
          <span>{{item.id}}</span><span>{{item.pname}}</span
          ><span>{{item.price}}</span>
          <div>
            <p v-for="(skuItem,index) in item.sku">
              <span>{{skuItem.color}}</span><span>{{skuItem.size}}</span>
            </p>
          </div>
        </li>
      </ul>
      <!-- 循环固定次数 -->
      <ul>
        <li v-for="n in 10">
          {{n}} 等奖
        </li>
      </ul>
    </div>
    <script src="./vue.js"></script>
    <script>
      var vm = new Vue({
        el: '#app',
        data() {
          return {
            list: ['托儿索', '儿童劫', '小学僧', '凯'],
            obj: {
              name: '小明',
              age: 6,
              sex: '男'
            },
            prolist: [
              {
                id: 1,
                pname: '火车',
                price: 888,
                sku: [
                  { color: '白色', size: 1888 },
                  { color: '红色', size: 1999 }
                ]
              },
              {
                id: 2,
                pname: '高铁',
                price: 999,
                sku: [
                  { color: '蓝色', size: 2222 },
                  { color: '黑色', size: 3333 }
                ]
              }
            ]
          }
        }
      })
    </script>
  </body>
</html>
